<template>
    <div>
        <el-select size="mini"
          v-model="provinceCode"
          placeholder="请选择省"
          @change="getProvince()"
        >
          <el-option
            v-for="item in provinceList"
            :key="item.provinceCode"
            :label="item.areaName"
            :value="item.provinceCode"
          ></el-option>
        </el-select>

        <el-select v-model="cityCode" placeholder="请选择市" :disabled="disabled" size="mini" @change="getCity">
          <el-option
            v-for="item in cityList"
            :key="item.cityCode"
            :label="item.cityName"
            :value="item.cityCode"
            @change="getCity()"
          ></el-option>
        </el-select>
        <el-select size="mini"
          v-model="countryCode"
          placeholder="请选择县/区"
          :disabled="disabled"
          @change="getArea"
        >
          <el-option
            v-for="item in countryList"
            :key="item.countryCode"
            :label="item.countryName"
            :value="item.countryCode"
          ></el-option>
        </el-select>

    </div>
</template>

<script>
  import city from "@/components/city_code.json";

  export default {
        name: "cityThree",
      data() {
        return {
          //记录省市县
          provinceList: [],
          dataprovinceList: [],
          provinceCode: "",
          cityList: [],
          datacityList: [],
          cityCode: "",
          countryList: [],
          datacountryList: [],
          countryCode: "",

          //是否可以编辑
          disabled: false,
          activeClass: "active",
        };
      },
      methods: {
        onChange() {
          this.disabled = false;
          this.activeClass = "disactive";
          this.disactiveClass = "active";
        },

        showcity() {
          let _this = this;
          var provinceArr = [];
          var cityArr = [];
          var countryArr = [];
          for (let i = 0; city.length > i; i++) {
            //循环获取省级单位
            for (var key in city[i]) {

              let provinceCode = city[i].code;
              let areaName = city[i].name;
              var cities = city[i].city;
              var pro = {provinceCode, areaName};
            }
            //循环获取市级单位
            for (var j = 0; cities.length > j; j++) {
              let cityName = cities[j].name;
              let cityCode = cities[j].code;
              var counties = cities[j].area;
              var citiesres = {cityName, cityCode};
              cityArr.push(citiesres);
              //循环获取县级单位
              for (var n = 0; counties.length > n; n++) {
                let countryName = counties[n].name;
                let countryCode = counties[n].code;
                var countiesres = {countryName, countryCode};
                countryArr.push(countiesres);
              }
              //console.log(countiesres);
            }

            provinceArr.push(pro);
          }
          this.provinceList = provinceArr;
          this.cityList = cityArr;
          this.countryList = countryArr;
          this.dataprovinceList = provinceArr;
          this.datacityList = cityArr;
          this.datacountryList = countryArr;
          //console.log(this.cityList);
          //console.log(this.cityArr);
          //console.log(this.countryList);
          console.log('over')
        },
        //省和市的联动,根据市/100的整数商进行遍历
        getProvince() {
          let _this = this;
          //console.log(this.provinceCode)
          this.cityList = this.datacityList;
          if (this.provinceCode != 0) {
            let cArray = this.cityList;
            let cArrres = [];

            for (var i = 0; cArray.length > i; i++) {

              if (parseInt(cArray[i].cityCode / 10000)*10000 == this.provinceCode) {
                cArrres.push(cArray[i]);
              } else {
              }
              ;
            }
            this.cityList = cArrres;
            console.log(this.cityList[0])
            this.cityCode = this.cityList[0].cityCode;
            //回调自动获取当前选择的县区
            this.getCity();
          }
          console.log("省：" + this.provinceCode + "市：" + this.cityCode + "县：" + this.countryCode)
        },
        //市县联动
        getCity() {
          let _this = this;
          this.countryList = this.datacountryList;
          if (this.cityCode != 0) {
            let cArray = this.countryList;
            let cArrres = [];
            for (var i = 0; cArray.length > i; i++) {
              if (parseInt(cArray[i].countryCode / 100)*100 == this.cityCode) {
                cArrres.push(cArray[i]);
              } else {
              }
              ;
            }
            this.countryList = cArrres;
            console.log(this.countryList)
            this.countryCode = this.countryList[0].countryCode;
          }
        },
        getArea() {
          console.log(this.countryCode)
        },
      }, mounted() {
      this.showcity();

    }


  }


</script>

<style scoped>

</style>
